<script setup>
import empty from '@/assets/img/empty.png'
import EmptyData from '../../../components/emptyData.vue';
import { reactive, onMounted, onBeforeUnmount, computed, inject } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const api = store.state.api
// 跳转房间
const jumpRoom = inject('methods').jumpInterRoom
let rankList = reactive({
    result: []
})
const getList = async () => {
    await api.cycle2rank({ cycle: 1 }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": [
        //             // {
        //             //     "ancPic": "http://qiqi-resource.qxiu.com/op/2018/01/12/95be0632928b41968691878801bf7299.jpg@style@s640",
        //             //     "anchorId": 361675,
        //             //     "anchorName": "1号主播",
        //             //     "tickets": 0,
        //             //     "success": 0,
        //             //     "rankNo": 1,
        //             //     "roomId": 200005,
        //             //     "scores": 0,
        //             //     "showtype": 1,
        //             //     "state": 2,
        //             //     "timeStampe": 9223372036854776000
        //             // }
        //         ],
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) rankList.result = res.data.result
        // for (let i = 0; i < 10; i++) {
        //     rankList.result.push({
        //         "ancPic": "http://qiqi-resource.qxiu.com/op/2018/01/12/95be0632928b41968691878801bf7299.jpg@style@s640",
        //         "anchorId": 361675,
        //         "anchorName": "1号主播",
        //         "tickets": 0,
        //         "success": 0,
        //         "rankNo": i + 1,
        //         "roomId": 200005,
        //         "scores": 0,
        //         "showtype": 1,
        //         "state": 2,
        //         "timeStampe": 9223372036854776000
        //     })
        // }
    })
}
const rank = computed(() => {
    return rankList.result
})
let timer
onMounted(() => {
    getList()
    timer = setInterval(() => {
        getList()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
</script>

<template>
    <div class="finalRank">
        <template v-if="rank.length > 0">
            <ul class="topThr">
                <li v-for="(item, index) in rank.slice(0, 3)" :key="index">
                    <div class="imgBox">
                        <img v-if="item.state == 2" class="headImg toRoom"
                            @click="jumpRoom(item.state, item.roomId, item.showtype)" :src="item.ancPic || empty" alt="">
                        <img v-else class="headImg" :src="item.ancPic || empty" alt="">
                        <img v-if="item.state == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                        <p class="rankNo"></p>
                    </div>
                    <p class="info"><span class="name">{{ item.anchorName }}</span><span>ID:{{ item.anchorId }}</span></p>
                    <p class="finalScore"><span>决战分</span><span>{{ item.scores }}</span></p>
                </li>
            </ul>
            <ul class="topFour">
                <li>
                    <div>排名</div>
                    <div>主播</div>
                    <div>决战分</div>
                </li>
                <li v-for="(item, index) in rank.slice(3, 10)" :key="index">
                    <div>{{ item.rankNo }}</div>
                    <div>
                        <img v-if="item.state == 2" class="headImg toRoom"
                            @click="jumpRoom(item.state, item.roomId, item.showtype)" :src="item.ancPic || empty" alt="">
                        <img v-else class="headImg" :src="item.ancPic || empty" alt="">
                        <img v-if="item.state == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                        <p><span class="name">{{ item.anchorName }}</span><span>ID:{{ item.anchorId }}</span></p>
                    </div>
                    <div>{{ item.scores }}</div>
                </li>
            </ul>
        </template>
        <EmptyData v-else />
    </div>
</template>

<style lang='scss' scoped></style>